<template>
  <div class="app-container">
    <top-title :updateTime="false" :isString="true" :cusString="cusString"></top-title>
    <div class="content-wrap">
      <div class="header flex">
        <img src="@/assets/imgs/event/icon.png" alt="" />
        <div class="header-right flex column justify-around">
          <div class="restaurant-name">{{ pageRecords.restaurantName }}-{{ ' ' + pageRecords.deviceName }}</div>
          <div class="mn">
            MN码:
            <span class="MN-number">{{ pageRecords.deviceMonitorMn }}</span>
          </div>
        </div>
      </div>
      <div class="detail-info">
        <div class="detail-info-common flex">
          <div class="f1 flex">
            <div class="detail-info-lable">所属餐厅：</div>
            <div class="detail-info-value">{{ pageRecords.restaurantName }}</div>
          </div>
          <div class="f1 flex">
            <div class="detail-info-lable">所属街道：</div>
            <div class="detail-info-value">{{ pageRecords.regionName }}</div>
          </div>
          <div class="f1 flex">
            <div class="detail-info-lable">监管单位：</div>
            <div class="detail-info-value">{{ pageRecords.unitName }}</div>
          </div>
        </div>
        <div class="detail-info-common flex">
          <div class="f1 flex">
            <div class="detail-info-lable">餐厅规模：</div>
            <div class="detail-info-value">
              {{ pageRecords.restaurantScale == 1 ? '小型' : pageRecords.restaurantScale == 2 ? '中型' : '大型' }}
            </div>
          </div>
          <div class="f1 flex">
            <div class="detail-info-lable">餐厅负责人：</div>
            <div class="detail-info-value">{{ pageRecords.restaurantChargeName }}</div>
          </div>
          <div class="f1 flex">
            <div class="detail-info-lable">负责人电话：</div>
            <div class="detail-info-value">{{ pageRecords.restaurantChargePhone }}</div>
          </div>
        </div>
        <div class="detail-info-common flex">
          <div class="f1 flex">
            <div class="detail-info-lable">清洗周期：</div>
            <div class="detail-info-value">{{ pageRecords.restaurantCleanCycle + '天' }}</div>
          </div>
          <div class="f1 flex">
            <div class="detail-info-lable">最近一次清洗时间：</div>
            <div class="detail-info-value">{{ pageRecords.cleanTime.split(' ')[0] }}</div>
          </div>
          <div class="f1 flex">
            <div class="detail-info-lable">清洗倒计时：</div>
            <div class="detail-info-value" v-if="pageRecords.downCleanDay > 0">{{ pageRecords.downCleanDay }}天</div>
            <div class="detail-info-value" v-else style="color: #ff517b">逾期{{ pageRecords.downCleanDay * -1 }}天</div>
          </div>
        </div>
        <div class="detail-info-common flex">
          <div class="f1 flex">
            <div class="detail-info-lable">营业地址：</div>
            <div class="detail-info-value">{{ pageRecords.restaurantAddress }}</div>
          </div>
        </div>
      </div>

      <div class="detail-info">
        <div class="alter-container flex align-center">
          <div v-if="pageRecords.type == 1">
            <img src="@/assets/imgs/event/ewarming.png" alt="" />
            <span>预警详情</span>
          </div>

          <div v-else-if="pageRecords.type == 2">
            <img src="@/assets/imgs/event/warming.png" alt="" />
            <span style="color: #ff517b">告警详情</span>
          </div>

          <div v-else-if="pageRecords.type == 3">
            <img src="@/assets/imgs/event/offline.png" alt="" />
            <span style="color: #06d6db">离线详情</span>
          </div>
        </div>

        <div class="detail-info" v-if="pageRecords.type != 3">
          <div class="detail-info-common flex">
            <div class="f1 flex">
              <div class="detail-info-lable" v-if="pageRecords.type == 1">预警时间:</div>
              <div class="detail-info-lable" v-else-if="pageRecords.type == 2">告警时间:</div>
              <div class="detail-info-value">{{ pageRecords.alarmTime }}</div>
            </div>
            <div class="f1 flex">
              <div class="detail-info-lable">排风机状态:</div>
              <div class="detail-info-value">{{ pageRecords.fanStatus == 1 ? '开启' : '关闭' }}</div>
            </div>
            <div class="f1 flex">
              <div class="detail-info-lable">净化器状态：</div>
              <div class="detail-info-value">{{ pageRecords.purifyStatus == 1 ? '开启' : '关闭' }}</div>
            </div>
          </div>
          <div class="detail-info-common flex">
            <div class="f1 flex">
              <div class="detail-info-lable">油烟浓度:</div>
              <div
                class="detail-info-value"
                :class="
                  pageRecords.thickSmokeType == 1
                    ? ''
                    : pageRecords.thickSmokeType == 2
                    ? 'ewarming-color'
                    : 'warming-color'
                "
              >
                {{ pageRecords.thickSmoke }} mg/m³
              </div>
            </div>
            <div class="f1 flex">
              <div class="detail-info-lable">颗粒物浓度:</div>
              <div
                class="detail-info-value"
                :class="
                  pageRecords.particleHazeType == 1
                    ? ''
                    : pageRecords.particleHazeType == 2
                    ? 'ewarming-color'
                    : 'warming-color'
                "
              >
                {{ pageRecords.particleHaze }} mg/m³
              </div>
            </div>
            <div class="f1 flex">
              <div class="detail-info-lable">非甲烷总烃浓度：</div>
              <div
                class="detail-info-value"
                :class="
                  pageRecords.nonMethaneType == 1
                    ? ''
                    : pageRecords.nonMethaneType == 2
                    ? 'ewarming-color'
                    : 'warming-color'
                "
              >
                {{ pageRecords.nonMethane }} mg/m³
              </div>
            </div>
          </div>
        </div>

        <div v-else>
          <div class="detail-info-common flex">
            <div class="f1 flex">
              <div class="detail-info-lable">离线时间:</div>
              <div class="detail-info-value">{{ pageRecords.alarmTime }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topTitle from '@/components/topTitle'
export default {
  name: '',
  components: { topTitle },
  data() {
    return {
      pageRecords: {},
      cusString: '事件管理-',
    }
  },
  mounted() {
    this.pageRecords = { ...this.$route.query }
    console.log(this.pageRecords, 'pageRecords')
    if (this.pageRecords.type == 1) {
      this.cusString += '预警详情页'
    } else if (this.pageRecords.type == 2) {
      this.cusString += '告警详情页'
    } else {
      this.cusString += '离线详情页'
    }
  },
  methods: {},
  destroyed() {},
}
</script>

<style scoped lang="less">
.app-container {
  overflow: hidden;
  .content-wrap {
    width: 1200px;
    height: 90%;
    margin: 0 auto;
    overflow: hidden;
    background: #024c4e;
    padding: 40px 50px;

    .header {
      padding-bottom: 20px;
      border-bottom: 2px solid #05585a;
      margin-bottom: 20px;
      .header-right {
        margin-left: 5px;
      }
      .restaurant-name {
        font-size: 18px;
        line-height: 18px;
        font-weight: 500;
        color: #85fcff;
      }
      .mn {
        font-size: 14px;
        font-weight: 400;
        color: #06d6db;
        line-height: 14px;
      }
    }

    .alter-container {
      height: 40px;
      margin-left: 60px;
      margin-bottom: 20px;
      padding-left: 14px;
      background: #03585b;

      font-size: 14px;
      font-weight: 500;
      color: #deef35;
      span {
        margin-left: 5px;
      }
    }

    .detail-info-common {
      padding-left: 60px;
      font-size: 14px;
      font-weight: 400;
      color: #02c1c7;
      margin-bottom: 20px;
      .detail-info-value {
        color: #9cfdff;
        margin-left: 5px;
      }
    }

    .ewarming-color {
      color: #e6ee39 !important;
    }

    .warming-color {
      color: #f95672 !important;
    }
  }
}
</style>
